<template>
  <div class="Chat">
    <div class="cebianlan">
      <ChatZuo></ChatZuo>
    </div>
    <div class="list">
      <ChatLeft></ChatLeft>
    </div>
    <div class="white">
      <ChatBox></ChatBox>
    </div>
  </div>
</template>
<script>
import ChatLeft from '@/components/ChatLeft.vue';
import ChatZuo from '@/components/ChatZuo.vue';
import ChatBox from '@/components/ChatBox.vue';
export default {
  components: {
    ChatBox,
    ChatZuo,
    ChatLeft
  }
}
</script>
<style>
.Chat {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

.cebianlan {
  width: 5%;
  background-color: #2F2F2F;
  height: 100%;
}

.list {
  width: 20%;
  /* background-color: azure; */
  background-color: #F6F6F6;
  /* border: 1px solid #c4c2c2; */
  height: 100%;
}

.white {
  width: 75%;
  background-color: #FFFFFF;
  height: 100%;
}
</style>